
import { Layout,Popconfirm } from 'antd'
import { LogoutOutlined } from '@ant-design/icons'
import { useDispatch,useSelector } from 'react-redux'
import { useEffect } from 'react'
import { setUserInfoAsync, clearUserInfo } from '@/store/modules/user'
import { useNavigate, Outlet } from 'react-router-dom'


const { Header } = Layout
const Index = () => {

    const Navigate = useNavigate()
      // TODO: 获取用户信息
    const dispatch = useDispatch()
    useEffect(() => {
        dispatch(setUserInfoAsync())
    },[dispatch])
    const userInfo = useSelector((state) => state.user.userInfo)
    
    // TODO: 退出登录
    const OnConfirm = () => {
        dispatch(clearUserInfo())
        Navigate('/login')
    }


    return (
        <div>
            <Layout>
                <Header className="header">
                    <div className="logo" />
                    <div className="user-info">
                    <span className="user-name">{userInfo.name || '无数据'}</span>
                    <span className='admin' style={{marginRight: '15px', color: '#1890ff',cursor: 'pointer'}} onClick={() => Navigate('/admin')}>进入后台</span>
                    <span className="user-logout">
                        <Popconfirm 
                        title="是否确认退出？" 
                        okText="退出" 
                        cancelText="取消"
                        onConfirm={OnConfirm}
                        >
                        <LogoutOutlined /> 退出
                        </Popconfirm>
                    </span>
                    </div>
                </Header>
            </Layout>
            <Outlet />

        </div>
    )
}

export default Index